<%@ page pageEncoding="UTF-8"%>
<%@ include file="../commons/head.jsp"%>
<title>查看会员详情</title>
<head>
<script type="text/javascript" src="${ctxStatic}/js/fileupload/vendor/jquery.ui.widget.js"></script>
<script type="text/javascript" src="${ctxStatic}/js/fileupload/load-image.min.js"></script>
<script type="text/javascript" src="${ctxStatic}/js/fileupload/canvas-to-blob.min.js"></script>
<script type="text/javascript" src="${ctxStatic}/js/fileupload/jquery.blueimp-gallery.min.js"></script>
<script type="text/javascript" src="${ctxStatic}/js/fileupload/jquery.iframe-transport.js"></script>
<script type="text/javascript" src="${ctxStatic}/js/fileupload/jquery.fileupload.js"></script>
<script type="text/javascript" src="${ctxStatic}/js/fileupload/jquery.fileupload-process.js"></script>
<script type="text/javascript" src="${ctxStatic}/js/fileupload/jquery.fileupload-validate.js"></script>
<script type="text/javascript" src="${ctxStatic}/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="${ctxStatic}/js/bootstrap-datetimepicker.zh-CN.js"></script>
<style type="text/css">
</style>
</head>
<body onload="loadMember(${id })">
	<div class="jianju">
		<div class="container-fluid">
			<h3>会员编辑</h3>
			<!-- 会员添加的问题问题:
				1.验证
				2.下拉框不能自动选择 -->
			<form id="form2" class="form-horizontal"
				action="${ctx}/member/create" method="post"  autocomplete="off">
				<input style="display: none;" type="file" id="file" name="imgs">
				<input style="display: none;" id="id" name="id"/>
				<div class="form-group">
					<label class="col-md-3 control-label"></label>
					<div class="col-md-2"
						style="color: red; font-size: medium; font-weight: bold;"
						id="message"></div>
				</div>
				
				
				
				<div class="form-group">
					<label for="recommenderCellphone" class="col-md-3 control-label"
						style="margin-top: 6px;">开单中心：</label>
					<div class="col-md-2">
						<select id="branchCenter" name="branchId" class="easyui-combobox"
							style="width: 180px; height: 34px;" mode="remote"
							url="${ctx}/member/findUserName?f=false" valueField="userAccount"
							textField="username" method="get" editable="false" readonly="readonly"
							panelHeight="600px;">
						</select>

					</div>
					<div class="col-md-3"></div>
				</div>

				<div class="form-group">
					<label for="cellPhone" class="col-md-3 control-label"
						style="margin-top: 6px;">会员手机号：</label>
					<div class="col-md-2">
						<input id="cellphone" name="cellPhone" readonly="readonly"
							class="form-control isRemove" style="width: 180px;"  type="text" maxlength="11">
					</div>
					<div class="col-md-3" id="cellPhone">
						<label class="error"></label>
					</div>
				</div>
				
				<div class="form-group">
					<label for="password" class="col-md-3 control-label"
						style="margin-top: 6px;">登录密码：</label>
					<div class="col-md-2">
						<input id="password" name="password" autocomplete="off"
							class="form-control isRemove" style="width: 180px;" type="password"
							 maxlength="11">
					</div>
					<div class="col-md-3" id="cellPhone">
						<label class="error"></label>
					</div>
				</div>
				
				<div class="form-group">
					<label for="memberName" class="col-md-3 control-label"
						style="margin-top: 6px;">会员姓名：</label>
					<div class="col-md-2">
						<input id="memberName" name="memberName" readonly="readonly"
							class="form-control isRemove" style="width: 180px;" type="text" maxlength="20">
					</div>
					<div class="col-md-3"></div>
				</div>

				<div class="form-group">
					<label for="gender" class="col-md-3 control-label"
						style="margin-top: 6px;">性别：</label>
					<div class="col-md-2">
						<select id="gender" name="gender" class="easyui-combobox"
							style="width: 180px; height: 34px;" mode="remote"
							url="${ctx}/enum?enumName=Gender" valueField="id" readonly="readonly"
							textField="name" method="get" editable="false" panelHeight="auto">
						</select>
					</div>
					<div class="col-md-3"></div>
				</div>

				<div class="form-group">
					<label for="memberName" class="col-md-3 control-label"
						style="margin-top: 6px;">身份证号码：</label>
					<div class="col-md-2">
						<input id="idCardNumber" name="idCardNumber" class="form-control" readonly="readonly"
							style="width: 180px;" type="text" value=""
							maxlength="18">
					</div>
					<div class="col-md-3" id="idCardError"></div>
				</div>

				<div class="form-group">
					<label for="recommenderCellphone" class="col-md-3 control-label"
						style="margin-top: 6px;">出生年月：</label>
					<div class="col-md-2">
						<input id="birthday" name="birthday" class="form-control"
							style="width: 180px;" onchange="removeBir()" readonly="readonly"
							type="text">
					</div>
					<div class="col-md-3"></div>
				</div>

				<div class="form-group">
					<label for="familyAddress" class="col-md-3 control-label"
						style="margin-top: 6px;">家庭住址：</label>
					<div class="col-md-4">
						<input id="familyAddress" name="familyAddress"
							class="form-control isRemove" type="text" value="" maxlength="50">
					</div>
					<div class="col-md-3"></div>
				</div>

				<div class="form-group">
					<label for="memberName" class="col-md-3 control-label"
						style="margin-top: 6px;">身份证照片：</label>
					<div class="col-md-3">
						<img alt="身份证正面" id="idCardFront"
							src="${ctx}/static/images/frontIdCard.png" class="img-responsive"
							onclick="imgOne()" style="width: 190px; height: 150px;">
					</div>
					<div class="col-md-3">
						<img alt="身份证北面" id="idCardBack"
							src="${ctx}/static/images/backIdCard.png" class="img-responsive"
							onclick="imgTwo()" style="width: 190px; height: 150px;">
					</div>
					<div class="col-md-3"></div>
					<div class="col-md-3"></div>
				</div>

				<div class="form-group">
					<div class="col-md-2"></div>
					<div id="navlist">
						<label style="font-size: 20px;">银行卡信息</label>
					</div>
					<div class="col-md-2"></div>
				</div>

				<div class="form-group">
					<label for="bankCardId" class="col-md-3 control-label"
						style="margin-top: 6px;">银行卡号：</label>
					<div class="col-md-2">
						<input id="bankCardId" name="bankCardId"
							class="form-control isRemove" style="width: 180px;" type="text"
							value="" maxlength="19">
					</div>
					<div class="col-md-3"></div>
				</div>

				<div class="form-group">
					<label for="bankCardId" class="col-md-3 control-label"
						style="margin-top: 6px;">银行预留手机号：</label>
					<div class="col-md-2">
						<input id="cellphoneForBankCard" name="cellphoneForBankCard"
							class="form-control isRemove" style="width: 180px;" type="text"
							value="" maxlength="11">
					</div>
					<div class="col-md-3" id="phoneBank"></div>
				</div>

				<div class="form-group">
					<label for="bankName" class="col-md-3 control-label"
						style="margin-top: 6px;">银行名称：</label>
					<div class="col-md-2">
						<input id="bankName" name="bankName" class="form-control isRemove"
							style="width: 180px;" type="text" value="" maxlength="50">
					</div>
					<div class="col-md-3"></div>
				</div>


				<div class="form-group">
					<label for="familyAddress" class="col-md-3 control-label"
						style="margin-top: 6px;">银行卡照片：</label>
					<div class="col-md-3">
						<img alt="银行卡" id="bankCardBack"
							src="${ctx}/static/images/bankcard.jpg" class="img-responsive"
							onclick="imgThree()" style="width: 190px; height: 150px;">
						<input id="frontPhotoOfIdcard" name="frontPhotoOfIdcard"
							type="hidden" value=""> <input id="backPhotoOfIdcard"
							name="backPhotoOfIdcard" type="hidden" value=""> <input
							id="photoOfBankCard" name="photoOfBankCard" type="hidden"
							value="">
					</div>
					<!-- <div class="col-md-3"><button id="idcertificationBtn" type="button" class="btn btn-primary btn-lg" style="background-color: red;">实名认证</button></div> -->
					<div class="col-md-2"></div>
				</div>

				<!-- 收货地址信息 -->
				<div class="form-group">
					<div class="col-md-2"></div>
					<div id="navlist">
						<label style="font-size: 20px;">收货地址信息</label>
					</div>
					<div class="col-md-2"></div>
				</div>

				<div class="form-group">
					<label for="memberName" class="col-md-3 control-label"
						style="margin-top: 6px;">收货人姓名：</label>
					<div class="col-md-2">
						<input id="logisticsName" name="logisticsName"
							class="form-control isRemove" style="width: 180px;" type="text"
							value="" maxlength="20">
							<input hidden="hidden" id="addId" name="addId"/>
					</div>
					<div class="col-md-3"></div>
				</div>

				<div class="form-group">
					<label for="memberName" class="col-md-3 control-label"
						style="margin-top: 6px;">收货人联系电话：</label>
					<div class="col-md-2">
						<input id="logisticsPhone" name="logisticsPhone"
							class="form-control isRemove" style="width: 180px;" type="text"
							value="" maxlength="11">
					</div>
					<div class="col-md-3" id="phoneSend"></div>
				</div>

				<div class="form-group">
					<label for="memberName" class="col-md-3 control-label"
						style="margin-top: 6px;">邮政编码：</label>
					<div class="col-md-2">
						<input id="zipCode" name="zipCode" class="form-control isRemove"
							style="width: 180px;" type="text" value="" maxlength="6">
					</div>
					<div class="col-md-3" id="valiZipCod"></div>
				</div>


				<div class="form-group">
					<label for="gender" class="col-md-3 control-label"
						style="margin-top: 6px;">所在地区：</label>
					<div class="col-md-2">
						<select id="province" name="province" class="form-control"
							style="width: 180px;">
						</select>
					</div>
					<!-- <div class="col-md-2" id="provinceErr"></div> -->
					<div class="col-md-2">
						<select id="city" name="city" class="form-control"
							style="width: 180px; display: none;"></select>
					</div>
					<div class="col-md-2">
						<select id="district" name="district" class="form-control"
							style="width: 180px; display: none;"></select>
					</div>
				</div>

				<div class="form-group">
					<label for="memberName" class="col-md-3 control-label"
						style="margin-top: 6px;">详细地址：</label>
					<div class="col-md-4">
						<input id="address" name="address" class="form-control isRemove"
							type="text" value="" maxlength="50">
					</div>
					<div class="col-md-3"></div>
				</div>

				<div class="form-group">
					<label for="gender" class="col-md-3 control-label"
						style="margin-top: 6px;">是否默认：</label>
					<div class="col-md-2">
						<select id="isDefault" name="isDefault" class="form-control"
							style="width: 180px;"><option value="1">默认</option>
							<option value="0">非默认</option></select>
					</div>
					<div class="col-md-3"></div>
				</div>

				<!-- 保存按钮 -->
				<hr style="width: 98%;">
				<div class="form-group">
					<div class="col-md-3"></div>
					<a href="#" class="easyui-linkbutton button" iconcls="icon-ok"
						onclick="javascript:save()" id="">保存</a>
				</div>
			</form>
		</div>
	</div>
	<script type="text/javascript">
	var xmluse;
	var mess;
	$(function(){
		//开单中心不可更改
		//$("#branchCenter").combobox('readonly',true);
		<!--省市级联-->
		$.ajax({ 
			url:'${ctx}/static/province_data.xml', 
			type: 'GET', 
			dataType: 'xml',
			success: function(xml){
				mess="";
				xmluse=xml;
				mess = "<option>"+ "请选择" + "</option>";
					$(xml).find("province").each(function(i){
						mess += "<option>" +$(this).attr("name")+"</option>";
					})
					$("#province").html(mess);
			} 
			});
		
		$("#province").change(function(){
			$("#provinceErr").remove();
			var messs = "";
			var tan = $("#province").val();
			if (tan=="请选择") {
				$("#city").hide();
				$("#city").empty();
				$("#district").hide();
				$("#district").empty();
				return;
			}
			$(xmluse).find("province").each(function(i){
				if (tan == $(this).attr("name")) {
					$(this).find("city").each(function(i){
						messs += "<option>" +$(this).attr("name")+"</option>";
					})
				}
			})
			$("#city").html(messs);
			$("#city").show();
			var citymoren = $("#city").val();
			$(xmluse).find("city").each(function(i){
			
				if (citymoren == $(this).attr("name")) {
					var messss = "";
					$(this).find("district").each(function(i){
						messss += "<option>" + $(this).attr("name") + "</option>"
					})
					$("#district").html(messss);
					//$("#district").show();
				}
			})
			
		})
		$("#city").show();
		$("#district").show();
		$("#city").change(function(){
			var tank = $("#city").val();
			$(xmluse).find("city").each(function(i){
				if (tank==$(this).attr("name")) {
					var messss = "";
					$(this).find("district").each(function(i){
						messss += "<option>" + $(this).attr("name") + "</option>"
					})
					$("#district").html(messss);
					//$("#district").show();
				}
			})
		})
		$("#district").show();
		var photoFront = $("#frontPhotoOfIdcard").val();
		var photoBack = $("#backPhotoOfIdcard").val();
		var bankphoto = $("#photoOfBankCard").val();
		if (photoFront.length>0) {
			$("#idCardFront").attr("src","${ctx}/upload/"+photoFront);
		}
		if (photoBack.length>0) {
			$("#idCardBack").attr("src","${ctx}/upload/"+photoBack);
		}
		if (bankphoto.length>0) {
			$("#bankCardBack").attr("src","${ctx}/upload/"+bankphoto);
		}

		<!--获取是否为开单中心-->
		/* $.ajax({
			url:'${ctx}/member/getLoginInfo',
			success:function(data){
				if (data.userRole == 1) {
					$("#branchId").val(data.username);
				}
			}	
		}); */
		$("#frontPhotoOfIdcard").empty();
		$("#backPhotoOfIdcard").empty();
		$("#photoOfBankCard").empty();
		$("#birthday").datetimepicker({
			format: 'yyyy-mm-dd',
			autoclose: true,
			language: "zh-CN",
			minView : 2,
		});
		$('#birthday').datetimepicker().on('changeDate', function(ev){
		    if (ev!=null){
		       $("#birError").empty();
		    }
		});
	});
	
	var idSuccessFlag=0;
	var p1=0;
	var p2=0;
	var p3=0;
	$("#file").fileupload({
		iframe:true,			
		url:'${ctx}/fileUpload/picture',
		maxFileSize:2097152, //(最大2M)字节
		acceptFileTypes:/(\.|\/)('|png|jpeg|jpg')$/i,
		maxNumberofFiles:1,
	}).on('fileuploadprocessalways',function (e,data){
		if (data.files.error) {
			if ('File is too large' == data.files[0].error) {
			alert("照片大小不能超过2M");
			}else if('File type not allowed' == data.files[0].error){
				alert("上传的图片格式必须为jpg/jpeg/png");
			}					
		}else{
			data.submit();	
		}	
		}).on('fileuploaddone',function(e,data){
			if (p1==1) {
				$("#idCardFront").attr("src","${ctx}/upload/"+data.result.path);
				$("#frontPhotoOfIdcard").val(data.result.path);
				$("#frontP").empty();
				p1=0;
			}
			if (p2==1) {
				$("#idCardBack").attr("src","${ctx}/upload/"+data.result.path);
				$("#backPhotoOfIdcard").val(data.result.path);
				$("#backP").empty();
				p2=0;
			}
			if (p3==1) {
				$("#bankCardBack").attr("src","${ctx}/upload/"+data.result.path);
				$("#photoOfBankCard").val(data.result.path);
				$("#bankP").empty();
				p3=0;
			}
		
	});
	
		
		function imgOne(){
			p1=1;
			$("#file").click();
		}
		
		function imgTwo(){
			p2=1;
			$("#file").click();
		}
		function imgThree(){
			p3=1;
			$("#file").click();
		}
		
		function save(){
			var flag = true;
			//手机号验证
			var rephone =/^1[0-9]{10}$/;
			var reg = new RegExp(rephone);
			//不符合手机号规则的,都
			if (!(reg.test($("#cellphone").val()))){
				flag=false;
				$("#cellPhone").html("<div class='error' style='color:red;'>手机号格式错误</div>");
				return true;
		    }
			if (!(reg.test($("#cellphoneForBankCard").val()))){
				flag=false;
				$("#phoneBank").html("<div class='error' style='color:red;'>手机号格式错误</div>");
				return true;
		    }
			if (!(reg.test($("#logisticsPhone").val()))){
				flag=false;
				
				$("#phoneSend").html("<div class='error' style='color:red;'>手机号格式错误</div>");
				return true;
		    }
			//邮编验证
			var rezip =/^[0-9]{6}$/;
			var reg = new RegExp(rezip);
			if (!(reg.test($("#zipCode").val()))){
				flag=false;
				$("#valiZipCod").html("<div class='error' style='color:red;'>邮编格式错误</div>");
				return true;
		    }
			//身份证号验证
			var reIdcard =/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[A-Z])$/;
			var reg = new RegExp(reIdcard);
			if (!(reg.test($("#idCardNumber").val()))){
				flag=false;
				$("#idCardError").html("<div class='error' style='color:red;'>身份证号格式错误</div>");
				return true;
		    }
			if(flag){
				$("#form2").submit();
			}
		}
	
	$(".isRemove").each(function(){
		$(this).blur(function(){
			/* var ti = $(this).attr("name");
			$("#"+ti).empty(); */
			if (this.value.length>0) {
				$(this).parent().next("div").html("");
			}
		});
	});
	function removeBir(){
		$("#birError").empty();
	}
	
	//页面加载事件
	function loadMember(id){
		$.ajax({
			url:'${ctx}/member/memberEdit',
			data:{'id':id},
			async:true,
			success:function(data){
				$("#id").val(data.id);
				$("#branchCenter").combobox('select', data.branchId);
				$("#cellphone").val(data.cellPhone);
				$("#gender").combobox('select', data.gender);
				$("#memberName").val(data.memberName);
				$("#idCardNumber").val(data.idCardNumber);
				$("#birthday").val(data.birthday);
				$("#familyAddress").val(data.familyAddress);
				$("#bankCardId").val(data.bankCardId);
				$("#cellphoneForBankCard").val(data.cellphoneForBankCard);
				$("#bankName").val(data.bankName);
				$("#addId").val(data.addId);
				
				$("#logisticsName").val(data.logisticsName);
				$("#logisticsPhone").val(data.logisticsPhone);
				$("#zipCode").val(data.zipCode);
				$("#address").val(data.address);
				debugger
				$("#isDefault option[value='"+data.isDefault+"']").attr("selected","selected");
				
				$("#frontPhotoOfIdcard").val(data.frontPhotoOfIdcard);
				$("#backPhotoOfIdcard").val(data.backPhotoOfIdcard);
				$("#photoOfBankCard").val(data.photoOfBankCard);
				if(data.frontPhotoOfIdcard != "" && data.frontPhotoOfIdcard != null){
					$("#idCardFront").attr("src","${ctx }/upload/"+data.frontPhotoOfIdcard);
					$("#frontPhotoOfIdcard").val(data.frontPhotoOfIdcard);

				}
				if(data.backPhotoOfIdcard != "" && data.backPhotoOfIdcard != null){
					$("#idCardBack").attr("src","${ctx }/upload/"+data.backPhotoOfIdcard);
					$("#backPhotoOfIdcard").val(data.backPhotoOfIdcard);

				}
				if(data.photoOfBankCard != "" && data.photoOfBankCard != null){
					$("#bankCardBack").attr("src","${ctx }/upload/"+data.photoOfBankCard);
					$("#photoOfBankCard").val(data.photoOfBankCard);
				}
				var prov;
				//省份
				$("#province option").each(function (){
		            var txt = $(this).text();
		            if(new RegExp(txt).test(data.province)){
		            	$(this).attr("selected", true);
		            	prov = $(this).val();
		            	//
						return false;
		            }
		         });
				
				//市
				//var tan = prov;
				var messs;
				var cit;//存放city选择的
				$(xmluse).find("province").each(function(i){
					if (prov == $(this).attr("name")) {
						$(this).find("city").each(function(i){
							messs += "<option>" +$(this).attr("name")+"</option>";
						})
					}
				})
				$("#city").html(messs);
				$("#city option").each(function (){
		            var txt = $(this).text();
		            if(new RegExp(txt).test(data.city)){
		            	$(this).attr("selected", true);
		            	cit = $(this).val();
		                return false;
		            }
		         });
				
				//区
				//tan = cit;
				var messs1;
				$(xmluse).find("city").each(function(i){
					if (cit == $(this).attr("name")) {
						$(this).find("district").each(function(i){
							messs1 += "<option>" +$(this).attr("name")+"</option>";
						})
					}
				})
				$("#district").html(messs1);
				$("#district option").each(function (){
		            var txt = $(this).text();
		            if(new RegExp(txt).test(data.district)){
		            	$(this).attr("selected", true);
		                return false;
		            }
		         });
			}
		});	
	}
	</script>
</body>
</html>